<template>
	<view class="content" v-if="userInfo.verification && !userInfo.verification.mobile">
		<uni-popup ref="popup"  type="center" :mask-click="false">
			<view class="pop">
				<view class="head-box u-m-b-60">
					<view class="head-title u-m-b-20">绑定手机号</view>
					<view class="head-subtitle">为了您的账号安全，请绑定手机号</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">手机号</view>
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'mobile')"
							@input="mobileInput($event, 'mobile')" placeholder="请输入手机号"
							:placeholderStyle="placeholderStyle" v-model="bindMobile.data.mobile" type="number">
						</u-input>
						<button class="u-reset-button code-btn code-btn-start" :disabled="!bindMobile.data.isMobileEnd"
							:class="{ 'code-btn-end': bindMobile.data.isMobileEnd }" @tap="getSmsCode('changemobile')">
							{{ codeText }}
						</button>
					</view>
					<view class="message-error">{{ bindMobile.error.mobile || "" }}</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">验证码</view>
						<u-input class="u-m-r-10 u-flex-1" @blur="checkValue($event, 'code')"
							@input="checkValue($event, 'code')" placeholder="请输入验证码"
							:placeholderStyle="placeholderStyle" v-model="bindMobile.data.code" type="number"></u-input>
					</view>
					<view class="message-error">{{ bindMobile.error.code || "" }}</view>
				</view>
				<view class="form-item u-border-bottom">
					<view class="item-content u-flex u-col-center">
						<view class="item-title">邀请码</view>
						<u-input class="u-m-r-10 u-flex-1" placeholder="已填写过可为空" :placeholderStyle="placeholderStyle"
							v-model="bindMobile.data.invitation" type="number"></u-input>
						<button class="u-reset-button login-btn-start" @tap="bindMobileSubmit">
							立即绑定
						</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from "vuex";
	import FormValidate from "@/shopro/validate/form";
	import schema from "@/uview-ui/libs/util/async-validator";

	export default {
		data() {
			return {
				bindMobile: {
					data: {
						mobile: "", //手机号
						code: "", //验证码
						invitation: "", //邀请码
						isMobileEnd: false // 手机号输入完毕
					},
					rules: {
						code: FormValidate.code,
						mobile: FormValidate.mobile
					},
					error: {
						mobile: "", //手机号
						code: "" //验证码
					}
				},
				codeText: "获取验证码",
				disabledCode: false,
				placeholderStyle: "font-size: 30rpx; font-weight: 500;color:#C2C7CF;"
			}
		},
		computed: {
			...mapGetters(['userInfo', 'agentInfo'])
		},
		methods: {
			...mapActions(['getUserInfo', 'showAuthModal', 'getUserData']),
			// 检测
			checkValue(e, key) {
				this.validation(key);
			},

			// 手机号是否输入完毕
			mobileInput(e, key) {
				this.bindMobile.data.isMobileEnd = this.$u.test.mobile(
					this.bindMobile.data.mobile
				);
				this.validation(key);
			},
			// 校验数据
			validation(key, callback = () => {}) {
				let that = this;
				//拿到需要校验的数据
				let fieldValue = this.bindMobile.data[key];
				//拿到需要检验的规则
				let rules = this.bindMobile.rules[key];
				// 判空
				if (!rules || rules.length === 0) {
					return callback("");
				}
				// 设置当前的装填，标识为校验中
				let validateState = "validating";
				// 调用async-validator的方法
				let validator = new schema({
					[key]: rules
				});
				// 校验
				validator.validate({
						[key]: fieldValue
					}, {
						firstFields: true
					},
					(errors, fields) => {
						// 记录状态和报错信息
						validateState = !errors ? "success" : "error";
						let validateMessage = errors ? errors[0].message : "";
						that.form[that.authType].error[key] = validateMessage;
						callback(validateMessage);
					}
				);
			},
			// 获取短信验证码
			getSmsCode(type) {
				const that = this;
				if (that.bindMobile.data.isMobileEnd && !that.disabledCode) {
					that.$http(
						"common.smsSend", {
							mobile: that.bindMobile.data.mobile,
							event: type
						},
						"获取验证码中..."
					).then(res => {
						console.log(res)
						if (res.code === 1) {
							that.codeChange();
							that.$u.toast("验证码已发送，请注意查收短信");
						} else {
							uni.showToast({
								title: res.msg
							})
							that.$u.toast(res.msg);
						}
					});
				} else {
					that.$u.toast("请稍后再试");
				}
			},

			// 倒计时
			codeChange() {
				if (this.disabledCode) return;
				this.disabledCode = true;
				let n = 60;
				this.codeText = n + "s";
				const run = setInterval(() => {
					n -= 1;
					if (n < 0) {
						clearInterval(run);
					}
					this.codeText = n + "s";
					if (this.codeText < 0 + "s") {
						this.disabledCode = false;
						this.codeText = "重新获取";
					}
				}, 1000);
			},
			// 5.绑定手机
			async bindMobileSubmit() {
				let that = this;
				console.log(that.bindMobile.data)
				that.$http(
						"user.bindMobile", {
							mobile: that.bindMobile.data.mobile,
							code: that.bindMobile.data.code,
							invitation: that.bindMobile.data.invitation,
						},
						"绑定中..."
					)
					.then(res => {
						if (res.code === 1) {
							that.$u.toast(res.msg);
							that.getUserInfo();
						} else {
							that.$u.toast(res.msg);
						}
					});
			},
		},

	}
</script>

<style scoped>
	.content {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .1);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999;
	}

	.pop {
		margin: auto;
		background: #fff;
		padding: 30rpx 20rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
	}

	.item-content {
		padding: 20rpx;

	}

	.item-title {
		margin-right: 10rpx;
	}

	.head-box {
		.head-title {
			min-width: 160rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
			line-height: 36rpx;
		}

		.head-title-active {
			width: 160rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #999;
			line-height: 36rpx;
		}

		.head-title-animation {
			animation-name: title-animation;
			animation-duration: 0.1s;
			animation-timing-function: ease-out;
			animation-fill-mode: forwards;
		}

		.head-title-line {
			position: relative;

			&::before {
				content: "";
				width: 1rpx;
				height: 34rpx;
				background-color: #e4e7ed;
				position: absolute;
				left: -30rpx;
				top: 50%;
				transform: translateY(-50%);
			}
		}

		.head-subtitle {
			font-size: 26rpx;
			font-weight: 400;
			color: #c2c7cf;
			text-align: left;
			display: flex;
		}
	}

	.code-btn[disabled] {
		background-color: #fff;
	}

	.code-btn-start {
		width: 160rpx;
		line-height: 56rpx;
		border: 1rpx solid #e9b766;
		border-radius: 28rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #e9b766;
		opacity: 0.5;
	}

	.forgot-btn {
		width: 160rpx;
		line-height: 56rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #999;
	}

	.code-btn-end {
		opacity: 1 !important;
	}

	.login-btn-start {
		width: 158rpx;
		line-height: 56rpx;
		background: linear-gradient(90deg, #e9b461, #eecc89);
		border-radius: 28rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #ffffff;
	}

	.type-btn {
		padding: 20rpx;
		margin: 40rpx auto;
		width: 200rpx;
		font-size: 30rpx;
		font-weight: 500;
		color: #999999;
	}

	.auto-login-box {
		width: 100%;

		.auto-login-img {
			width: 68rpx;
			height: 68rpx;
			border-radius: 50%;
			margin: 0 30rpx;
		}
	}

	.agreement-box {
		margin: 80rpx auto 0;

		.protocol-check {
			transform: scale(0.7);
		}

		.agreement-text {
			font-size: 26rpx;
			font-weight: 500;
			color: #999999;

			.tcp-text {
				color: #e9b562;
			}
		}
	}
</style>
